import {Component, OnInit, OnDestroy, AfterViewInit} from '@angular/core';

import {PerformanceMonitoringService} from '@kylin/core';

import {EChartOption} from 'echarts';

import {format} from 'date-fns';

@Component({
    templateUrl: './echarts.component.html',
    styleUrls: ['./echarts.component.css']
})
export class EchartsComponent implements OnInit, OnDestroy, AfterViewInit {
    interval: any;
    option: EChartOption = null;
    merge: EChartOption = null;

    constructor(private PMService: PerformanceMonitoringService) {
    }

    xAxisData = [];
    seriesData = [];

    ngOnInit() {

        if (this.PMService.interval) {
            this.seriesData.push(this.PMService.collectData.usedTime);
            this.xAxisData.push(format(new Date(), 'HH:mm:ss'));
            this.option = {
                dataZoom: [{
                    type: 'slider',
                    showDataShadow: false,
                    bottom: 10,
                    borderColor: 'transparent',
                    backgroundColor: '#e2e2e2',
                    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                    handleSize: 20,
                    handleStyle: {
                        shadowBlur: 6,
                        shadowOffsetX: 1,
                        shadowOffsetY: 2,
                        shadowColor: '#aaa'
                    },
                    labelFormatter: ''
                }, {
                    type: 'inside'
                }],
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    data: this.xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: this.seriesData,
                    type: 'line'
                }]
            };
        }
    }

    ngAfterViewInit() {
        if (this.PMService.interval) {


            setInterval(() => {
                this.seriesData.push(this.PMService.collectData.usedTime);
                this.xAxisData.push(format(new Date(), 'HH:mm:ss'));
                if (this.seriesData.length > 30) {
                    this.seriesData.shift();
                    this.xAxisData.shift();
                }
                this.merge = {
                    dataZoom: [{
                        type: 'slider',
                        showDataShadow: false,
                        bottom: 10,
                        borderColor: 'transparent',
                        backgroundColor: '#e2e2e2',
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                        handleSize: 20,
                        handleStyle: {
                            shadowBlur: 6,
                            shadowOffsetX: 1,
                            shadowOffsetY: 2,
                            shadowColor: '#aaa'
                        },
                        labelFormatter: ''
                    }, {
                        type: 'inside'
                    }],
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: this.xAxisData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: this.seriesData,
                        type: 'line'
                    }]
                };
            }, 2000);
        }
    }

    ngOnDestroy() {
        if (this.interval) {
            clearInterval(this.interval);
        }
    }
}
